<template>
  <div class="testEdit">
    <h2 class="header">{{id ? '编辑' : '新建'}}试题</h2>
    <el-form label-width="120px" @submit.native.prevent="save">
      <el-form-item label="试卷名称">
         <el-select multiple  v-model="model.categories" placeholder="请选择">
    <el-option
      v-for="item in categories"
      :key="item._id"
      :label="item.title"
      :value="item._id">
    </el-option>
  </el-select>
      </el-form-item>
        <el-form-item label="试卷总分">
                <el-input type="text" v-model="model.totalScore"></el-input>
              </el-form-item>
              <el-form-item label="试卷总题数目">
                <el-input type="text" v-model="model.totalTitle"></el-input>
              </el-form-item>
               <el-form-item label="考试时间">
        <div class="duration">
          <el-input required="required" v-model="model.duration" placeholder="请输入考试时间/分钟"></el-input>
        </div>
      </el-form-item>
       <el-tabs value="single" type="border-card">
         <el-tab-pane name="single" label="单选题">
            <el-button class="el-icon-plus" @click="model.single.push({})"
             >添加试题</el-button
          >
          <el-row>
            <el-col :md="12" v-for="(item, index) in model.single" :key="item._id">
              <el-form-item label="单题得分">
                <el-input-number v-model="item.score" :min="1" :max="10" label="描述文字"></el-input-number>
              </el-form-item>
              <span>{{index + 1}}、</span>
              <el-form-item label="题目">
                <el-input type="textarea" v-model="item.title"></el-input>
              </el-form-item>
              <el-form-item label="选项" >
               
              <div v-for="(option,i) in item.singleOption" :key="option._id">
                  <div class="answerSing">
                  <div><span>{{i+1}}</span><input  v-model="option.answer" placeholder="点击即可编辑答案" ></div>
                  <div><el-button type="success" @click="pick( option,i)">设为正确答案</el-button><el-button type="danger" @click="item.singleOption.splice(i, 1)" >删除答案</el-button></div>
                  </div>
                   
                </div> 
               <el-button class="el-icon-plus" @click="item.singleOption.push({})">添加选项</el-button>
               
              </el-form-item>
              
              <el-form-item>
                 <el-button type="danger" @click="model.single.splice(index, 1)" style="float: right">删除</el-button>
              </el-form-item>
            </el-col>
          </el-row>
         </el-tab-pane>
         <el-tab-pane name="multiple" label="多选题">
            <el-button class="el-icon-plus" @click="model.multiple.push({})"
             >添加试题</el-button
          >
          <el-row>
            <el-col :md="12" v-for="(item, index) in model.multiple" :key="item._id">
              <el-form-item label="单题得分">
                <el-input-number v-model="item.score" :min="1" :max="10" label="描述文字"></el-input-number>
              </el-form-item>
              <span>{{index + 1}}、</span>
              <el-form-item label="题目">
                <el-input type="textarea" v-model="item.title"></el-input>
              </el-form-item>
              <el-form-item label="选项" >
               
              <div v-for="(option,i) in item.multipleOption" :key="option._id">
                  <div class="answerSing">
                  <div><span>{{i+1}}</span><input  v-model="option.answer" placeholder="点击即可编辑答案" ></div>
                  <div><el-button type="success" @click="pick( option,i)">设为正确答案</el-button><el-button type="danger" @click="item.multipleOption.splice(i, 1)" >删除答案</el-button></div>
                  </div>
                   
                </div> 
               <el-button class="el-icon-plus" @click="item.multipleOption.push({})">添加选项</el-button>
               
              </el-form-item>
              
              <el-form-item>
                 <el-button type="danger" @click="model.multiple.splice(index, 1)" style="float: right">删除</el-button>
              </el-form-item>
            </el-col>
          </el-row>
         </el-tab-pane>
         <el-tab-pane name="fill " label="填空题">
             <el-button class="el-icon-plus" @click="model.fill.push({})"
             >添加试题</el-button
          >
          <el-row>
            <el-col :md="12" v-for="(item, index) in model.fill" :key="item._id">
              <el-form-item label="单题得分">
                <el-input-number v-model="item.score" :min="1" :max="10" label="描述文字"></el-input-number>
              </el-form-item>          
              <span>{{index + 1}}、</span>
              <el-form-item label="题目">
                <el-input type="textarea" v-model="item.title"></el-input>
              </el-form-item>
              <el-form-item label="正确答案" >  
                <el-input v-model="item.pick"></el-input>     
              </el-form-item>
              
              <el-form-item>
                 <el-button type="danger" @click="model.fill.splice(index, 1)" style="float: right">删除</el-button>
              </el-form-item>
            </el-col>
          </el-row>
         </el-tab-pane>
         <el-tab-pane name="judge" label="判断题">
           <el-button class="el-icon-plus" @click="model.judge.push({})"
             >添加试题</el-button
          >
          <el-row>
            <el-col :md="12" v-for="(item, index) in model.judge" :key="item._id">
              <el-form-item label="单题得分">
                <el-input-number v-model="item.score" :min="1" :max="10" label="描述文字"></el-input-number>
              </el-form-item>
              <span>{{index + 1}}、</span>
              <el-form-item label="题目">
                <el-input type="textarea" v-model="item.title"></el-input>
              </el-form-item>
              <el-form-item label="答案" >
               
            <input placeholder="正确填写1 错误填写0" v-model="item.pick">
            

                   
               
              </el-form-item>
              
              <el-form-item>
                 <el-button type="danger" @click="model.judge.splice(index, 1)" style="float: right">删除</el-button>
              </el-form-item>
            </el-col>
          </el-row>
         </el-tab-pane>
         <el-tab-pane name="discuss" label="论述题">
           <el-button class="el-icon-plus" @click="model.discuss.push({})"
             >添加试题</el-button
          >
          <el-row>
            <el-col :md="12" v-for="(item, index) in model.discuss" :key="item._id">
              <el-form-item label="单题得分">
                <el-input-number v-model="item.score" :min="1" :max="10" label="描述文字"></el-input-number>
              </el-form-item>
              <span>{{index + 1}}、</span>
              <el-form-item label="题目">
                <el-input type="textarea" v-model="item.title"></el-input>
              </el-form-item>
              <el-form-item label="答案" >
               <el-input type="textarea" v-model="item.answer"></el-input>
              </el-form-item>
              
              <el-form-item>
                 <el-button type="danger" @click="model.discuss.splice(index, 1)" style="float: right">删除</el-button>
              </el-form-item>
            </el-col>
          </el-row>
         </el-tab-pane>
       </el-tabs>
      <el-form-item >
       <el-button type="primary" native-type="submit" style="float: right">提交</el-button>
      </el-form-item>
    </el-form>
    
  </div>
</template>

<script>
export default {
  props:{
   id: {
     type: String
   }
  },
  data() {
    return {
       imageUrl: '',
      model: {
       single:[{
         singleOption: [{
           pick: ''
         }],
       }],   
       multiple:[{
         multipleOption: [{
           pick: ''
         }],
       }],   
        fill:[{
           pick: ''
       }],
        judge:[{         
            pick: '', 
       }],  
        discuss:[{         
       }],  
      },
      categories: {},
     
    }
  },
methods: {
   pick(option) {
 this.$set(option, 'pick', 1)
   },
  async handleImageAdded(file, Editor, cursorLocation, resetUploader) {
      var formData = new FormData();
      formData.append("file", file);
      const res = await this.$http.post('upload', formData)
      Editor.insertEmbed(cursorLocation, "image", res.data.url)
      resetUploader()
    },
   afterUpload(res) {
  this.$set(this.model, 'avatar', res.url)
  },
  async save() {
    let res 
    if (this.id) {
   res = await this.$http.put(`/rest/tests/${this.id}`, this.model)
    } else {
    res = await this.$http.post('/rest/tests', this.model)

    }
    this.$router.push('/tests/list')
    this.$message({
      type: 'success',
      message: '保存成功'
    })
  },
  async fetchParent() {
  const res = await this.$http.get('/genre/test')
  this.categories = res.data
  },
  async fetchData() {
const res = await this.$http.get(`/rest/tests/${this.id}`)
this.model = res.data
  }
},
created() {
  this.fetchParent()
  this.id && this.fetchData()
}
}
</script>

<style>
.header {
  text-align: center;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
  .answerSing {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .answerSing .el-button {
  margin-top: 11px;
  width: 120px;
  height: 30px;
  line-height: 7px;
  text-align: center;
  }
</style>